<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/swiper.min.css" />
    <script src="../3-swiper/dist/js/swiper.js"></script>
    <script src="../plugins/vue.min.js"></script>
  </head>
  <body>
    <div id="box">
      <!-- 不加上key后面的，就会有问题 -->
      <!-- 加上之后，会有新老dom对比，不相同那么就会直接删除，会牵扯到销毁和重新创建 -->
      <!-- 新老dom都叫swiper会复用，但是key不同那么就会重新创建 -->

      <!-- <swiper :key="dataList.length"> -->
      <!-- 下面这种同样有效  为假那么就不会创建 -->

      <swiper v-if="dataList.length" :loop="false">
        <swiper-item v-for="data in dataList" :key="data">
          {{data}}
        </swiper-item>
      </swiper>
    </div>
    <script>
      Vue.component("swiperItem", {
        template: `
        <div class="swiper-slide">
               <slot></slot>
            </div>
        `,
      });

      Vue.component("swiper", {
        props: {
          loop: {
            type: Boolean,
            default: true,
          },
        },
        template: `
        <div class="swiper-container">
        <div class="swiper-wrapper">
               <slot></slot>   
            </div>
        <div class="swiper-pagination"></div> 
        </div>
        `,
        // 用mounted的话，那么第一次创建dom的时候，datalist为空，在更新之后，就不会再走，如果用
        // updata那么就会出现上次出现的问题，就是如果其他的更新操作，也会走  就是多次初始化
        mounted() {
          console.log("mounted");
          var mySwiper = new Swiper(".swiper-container", {
            //   direction: 'vertical', // 垂直切换选项
            loop: this.loop, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        },
        destroyed() {
          console.log("销毁了");
        },
      });

      let vm = new Vue({
        el: "#box",
        data: {
          dataList: [],
          myName: "",
        },
        mounted() {
          setTimeout(() => {
            this.dataList = ["11", "22", "33"];
          }, 2000);
        },
      });
    </script>
  </body>
</html>

<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
